<template>
  <!--
    $nextTick:在前面（所有的同步操作）的数据渲染完成后执行一个回调方法
    解决：
       1：数据不响应式更新时，可通过$nextTIck解决  静默刷新
       2:在获取dom时，要等到相应数据渲染完再获取，比如做弹框二维码处理
       3:重置组件
   -->
  <div>
    <div v-if="bol">
      <h3>{{ obj }}</h3>
      <button @click="setObj">修改obj</button>
      <hr>
      <h3>{{ arr }}</h3>
      <button @click="setArr">修改arr</button>
    </div>
    <el-button @click="openDialog">打开弹框</el-button>
    <el-dialog :visible.sync="show" title="标题">
      <div ref="abc">内容</div>
    </el-dialog>
    <hr>
    <div ref="xxx">xxx</div>
    <hr>
    <button @click="reset">重置son3</button>
    <Son3 v-if="bol3" />
  </div>
</template>
<script>
import Son3 from './components/son3.vue'
export default {
  components: {
    Son3
  },
  data() {
    return {
      bol3: true,
      bol: true,
      show: false,
      obj: {
        name: '张三'
      },
      arr: [1, 2, 3]
    }
  },
  created() {
    this.$nextTick(() => {
      console.log(this.$refs.xxx)
    })
  },
  methods: {
    setObj() {
      this.obj.age = Date.now()
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    setArr() {
      this.arr[0] = 999
    },
    openDialog() {
      this.show = true
      this.$nextTick(() => {
        console.log(this.$refs.abc)
      })
    },
    reset() {
      this.bol3 = false
      this.$nextTick(() => {
        this.bol3 = true
      })
    }
  }
}
</script>
<style></style>
